<template>
    <xh-pages :tabBar="true">
        <view class="pages-container" v-if="datalist.length">
            <view class="record-content">
                <view class="item" v-for="(item, index) in datalist" :key="index">
                    <view class="room-info">
                        <view class="room-id">
                            房号：{{ item?.channel?.room_no ?? '' }}
                            <text class="time" v-if="item?.expire_second">
                                （{{ item.expire_second }}秒）
                            </text>
                            <text class="time" v-else>
                                已过期
                            </text>
                        </view>
                        <view class="room-show">
                            <view class="show-btn" @tap="openWin({url:`/pages/chat/index?room_id=${item.channel_id}&isBack=1`})">
                                查看
                            </view>
                        </view>
                    </view>
                    <view class="avatar">
                        <u-avatar-group :urls="avatars" size="55" gap="0.4"></u-avatar-group>
                    </view>
                    <view class="sex-container">
                        <view class="label">我的性别：</view>
                        <view class="value"
                            :class="{ 'nansheng': item?.role_type === '10', 'nvsheng': item?.role_type === '20' }">
                            {{ item?.role_type === '10' ? '男生' : '女生' }}
                        </view>
                    </view>
                    <view class="talk-container">
                        话题：{{ item?.channel?.subject_content ?? '' }}
                    </view>
                    <view class="info">
                        <view class="number-container">
                            序号：{{ item?.id ?? '' }}
                        </view>
                        <view class="create-time">{{ item?.create_at ?? '' }}</view>
                    </view>
                </view>
            </view>
            <view class="mask-vip" v-if="!userinfo.is_vip">
                <view class="mask-content">
                    <u-icon name="/static/pic_padlock_record@2x.png" size="82"></u-icon>
                    <view class="text">查看聊天记录需要开通会员，购买会员后解锁特效和全部记录!</view>
                    <view class="vip-btn" @tap="openWin({'url':'/pages/users/index?t=1'},'reLaunch')">
                        开通会员解锁功能
                    </view>
                </view>
            </view>
        </view>
        <view class="empty-container" v-else>
            <u-empty mode="data" icon="/static/empty-new.png" />
        </view>
    </xh-pages>
</template>

<script setup lang="ts">
import { useUserStore } from '@/stores/user'
import { openWin } from '@/utils/helpers'

const datalist = ref<any>([])
const avatars = ref([
    '/static/pic_boy@2x.png',
    '/static/pic_girl@2x.png',
])

const userinfo = storeToRefs(useUserStore()).userInfo

const initify = () => {
    uni.$u.http.get('MatchsRecord/index').then((res: any) => {
        datalist.value = res?.data?.data ?? []
    })
}

onLoad(() => {
    initify()
})

onShow(() => {
    uni.$emit('user::update')
})
</script>

<style lang="scss" scoped>
.pages-container {
    height: 100%;

    position: relative;

    .mask-vip {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(8px);
        display: flex;
        justify-content: center;
        align-items: center;

        .mask-content {
            width: 80%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap:50rpx;
            .text{
                color: #fff;
                font-size: 28rpx;
                display: flex;
                justify-content: center;
            }
            .vip-btn{
                width: 100%;
                background-color: #FF6997;
                color: #fff;
                padding: 30rpx 0;
                border-radius: 50rpx;
                text-align: center;
            }
        }
    }

    .record-content {
        margin-bottom: 30rpx;
        padding: 30rpx;

        .item {
            background: #fff;
            padding: 30rpx;
            border-radius: 20rpx;
            margin-bottom: 30rpx;

            .room-info {
                display: flex;
                justify-content: space-between;

                .room-id {
                    color: #787E86;
                    font-size: 28rpx;

                    .time {
                        color: #AEB1B5;
                    }
                }

                .room-show {
                    .show-btn {
                        color: #FF6997;
                        border: 1px solid #FF6997;
                        border-radius: 30rpx;
                        padding: 6rpx 20rpx;
                        font-size: 26rpx;
                    }
                }
            }

            .avatar {
                padding: 20rpx 0;
            }

            .sex-container {
                padding: 20rpx 0;
                display: flex;
                font-size: 28rpx;

                .label {
                    color: #AEB1B5;
                }

                .value {}

                .nansheng {
                    color: #5260E1;
                }

                .nvsheng {
                    color: #FF6997;
                }
            }

            .talk-container {
                padding: 20rpx 0;
                display: flex;
                color: #333;
                font-size: 28rpx;
            }

            .info {
                display: flex;
                justify-content: space-between;
                color: #999;
                font-size: 28rpx;
            }
        }
    }
}

.empty-container {
    padding-top: 15vh;
}
</style>